<template>
  <div class="content-box">
    <div class="flex">
      <span class="text">项目名称</span>
      <div class="txt-item">{{ projectName }}</div>
    </div>
    <div class="flex">
      <span class="text">工程地址</span>
      <div class="txt-item">{{ projectAddress }}</div>
    </div>
    <div class="flex">
      <span class="text">工程规模</span>
      <div class="txt-item">{{ builtArea }}</div>
    </div>
    <div class="flex">
      <span class="text">投资金额</span>
      <div class="txt-item">{{ investmentAmount }}</div>
    </div>
    <div class="flex">
      <span class="text">建设单位</span>
      <div class="txt-item">{{ contractor }}</div>
    </div>
    <div class="flex">
      <span class="text">施工单位</span>
      <div class="txt-item">{{ constructionUnit }}</div>
    </div>
    <div class="flex">
      <span class="text">监理单位</span>
      <div class="txt-item">{{ controlUnit }}</div>
    </div>
    <div class="flex">
      <span class="text">设计单位</span>
      <div class="txt-item">{{ designUnit }}</div>
    </div>

    <span class="but" @click="onChangeInfo">编辑</span>

    <el-dialog width="530px" title="编辑项目信息" :visible.sync="dialogFormVisible">
      <div class="formCenter">
        <el-form>
          <el-form-item label="项目名称：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="form.projectName" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="工程地址：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="form.projectAddress" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="工程规模：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="form.builtArea" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="投资金额：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="form.investmentAmount" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="建设单位：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="form.contractor" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="施工单位：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="form.constructionUnit" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="监理单位：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="form.controlUnit" placeholder="请输入"></el-input>
          </el-form-item>
          <el-form-item label="设计单位：" :label-width="formLabelWidth">
            <el-input class="el_input" size="medium" v-model="form.designUnit" placeholder="请输入"></el-input>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
        <el-button size="small" type="primary" @click="submitFormInfo">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import httpInterface from "../../../util/httpInterface";

export default {
  name: "HomeItemInfo",
  components: {},
  data() {
    return {
      dialogFormVisible: false,
      formLabelWidth: "85px",
      projectName: "--",
      projectAddress: "--",
      builtArea: "--",
      investmentAmount: "--",
      contractor: "--",
      constructionUnit: "--",
      controlUnit: "--",
      designUnit: "--",
      form: {
        projectName: "",
        projectAddress: "",
        builtArea: "",
        investmentAmount: "",
        contractor: "",
        constructionUnit: "",
        controlUnit: "",
        designUnit: ""
      }
    };
  },

  methods: {
    onChangeInfo() {
      this.dialogFormVisible = true;
      let { id } = this;
      if (id) {
        let params = { id };
        httpInterface.requestGet(this, httpInterface.URL_INFORMATION_GETBYID, params, (res) => {
          let { other, success } = res.data;
          if (success) {
            this.form = other;
          }
        }, null)
      }
    },

    submitFormInfo() {
      let params = this.form;
      let url = this.id == undefined ? httpInterface.URL_INFORMATION_INSERT : httpInterface.URL_INFORMATION_UPDATE;
      httpInterface.requestPost(this, url, params, (res) => {
        let { success } = res.data;
        if (success) {
          this.dialogFormVisible = false;
          this.successMessage("编辑成功！");
          this.getProjectInfo();
        }
      }, null, false)
    },

    getProjectInfo(data) {
      let params = {
        bidSection: data || ""
      }
      httpInterface.requestGet(this, httpInterface.URL_INFORMATION_LIST, params, (res) => {
        let { other, success } = res.data;
        if (success) {
          this.projectName = other[0].projectName;
          this.projectAddress = other[0].projectAddress;
          this.builtArea = other[0].builtArea;
          this.investmentAmount = other[0].investmentAmount;
          this.contractor = other[0].contractor;
          this.constructionUnit = other[0].constructionUnit;
          this.controlUnit = other[0].controlUnit;
          this.designUnit = other[0].designUnit;
          this.id = other[0].id;
        }
      }, null)
    }
  }
};
</script>

<style scoped lang="scss">
  .content-box{
    color: rgba(255, 255, 255, .7);
    font-size: 13px;
    margin-top: 34px;

    .flex{
      margin: 18px 0;

      .text{
        color: rgba(255, 255, 255, .7);
        width: 56px;
        display: inline-block;
        text-align: right;
        margin-right: 14px;
      }

      .txt-item{
        display: flex;
        flex: 1;
      }
    }
  }

  .but{
    position: absolute;
    right: 18px;
    top: 24px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    transition: all 0.3s;

    &:hover{
      color: rgba(255, 255, 255, 0.8);
    }
  }

  .el-date-editor.el-input,
  .el_input {
    width: 220px;
  }

  .formCenter {
    display: flex;
    justify-content: center;

    .el-form .el-form-item {
      margin: 10px 0 !important;

      &:first-child {
        margin-top: 0 !important;
      }

      &:last-child{
        margin-bottom: 0 !important;
      }
    }
  }
</style>
